<template>
  <div class="home">
    <div class="bg">
      <div class="header">
        <div class="logo">
          <img src="../assets/tq1.png" alt="" class="tq1" />
        </div>
        <div class="r">
          <div class="r1" @click="home">{{ $t('首页') }}</div>
          <div class="r1" @click="wj" v-if="$store.state.userInfoK.uid != ''">{{ $t('问卷') }}</div>
          <div class="r1" @click="zy">{{ $t('中文/English') }}</div>
          <!-- <div class="r1">{{ $t('关于我们') }}</div> -->
          <!-- <div class="r1">{{ $t('质量保证') }}</div> -->
          <!-- <div class="r1">{{ $t('服务') }}</div> -->
          <div v-if="$store.state.userInfoK.uid != ''" class="r1" @click="goToProfile">{{ $store.state.userInfoK.nick_name
            }}</div>
          <div v-else class="r1" @click="login" style="cursor: pointer;">{{ $t('登录') }}</div>
        </div>
      </div>
      <div class="title">{{ $t('调研发现') }}</div>
      <div class="title2">{{ $t('面板') }}</div>
      <div class="dddd">
        <div class="l">
          <img src="../assets/tq6.png" alt="" class="r_img" />
        </div>
        <div class="r">
          <div class="t1">{{ $t('公司愿景') }}</div>
          <div class="t2">
            {{ $t('公司愿景描述') }}
          </div>
        </div>
      </div>
    </div>
    <div class="footer">{{ $t('我们的成就') }}</div>
    <div class="footer2">
      <div class="item">
        <div class="item1">2000+</div>
        <div class="item2"></div>
        <div class="item3">{{ $t('95+个国家的客户') }}</div>
        <div class="item4">{{ $t('全球范围内') }}</div>
      </div>
      <div class="item">
        <div class="item1">9620+</div>
        <div class="item2"></div>
        <div class="item3">{{ $t('B2C项目') }}</div>
        <div class="item4">{{ $t('每年交付') }}</div>
      </div>
      <div class="item">
        <div class="item1">3000+</div>
        <div class="item2"></div>
        <div class="item3">{{ $t('B2B项目') }}</div>
        <div class="item4">{{ $t('每年交付') }}</div>
      </div>
      <div class="item">
        <div class="item1">7504+</div>
        <div class="item2"></div>
        <div class="item3">{{ $t('调研完成') }}</div>
        <div class="item4">{{ $t('每年交付') }}</div>
      </div>
    </div>
    <div class="footer2_2">
      <div class="ttt1">{{ $t('为什么选择我们？') }}</div>
      <div class="ttt2">
        {{ $t('为什么选择我们描述') }}
      </div>
    </div>
    <div class="footer2_3">
      <div class="ggg">
        <img src="../assets/tq2.png" alt="" class="ggg_img" />
        <div class="ggg_title">{{ $t('定量研究服务') }}</div>
        <div class="ggg_text">
          {{ $t('定量研究服务描述') }}
        </div>
      </div>
      <div class="ggg ggg2">
        <img src="../assets/tq3.png" alt="" class="ggg_img" />
        <div class="ggg_title">{{ $t('丰富经验') }}</div>
        <div class="ggg_text">
          {{ $t('丰富经验描述') }}
        </div>
      </div>
      <div class="ggg ggg2">
        <img src="../assets/tq4.png" alt="" class="ggg_img" />
        <div class="ggg_title">{{ $t('更高质量') }}</div>
        <div class="ggg_text">
          {{ $t('更高质量描述') }}
        </div>
      </div>
    </div>
    <div class="footer2_4">
      <div class="footer2_4_1">{{ $t('探索我们的') }}</div>
      <div class="footer2_4_2">{{ $t('优质服务') }}</div>
      <div class="footer2_4_3">{{ $t('我们准备为您提供更好的解决方案。') }}</div>
    </div>
    <div class="footer2_5">
      <div class="footer2_5_1">
        <div class="footer2_5_1_1">
          <img src="../assets/tq555.png" alt="" />
        </div>
        <div class="footer2_5_1_2">
          <div class="footer2_5_1_2_1">{{ $t('数据收集') }}</div>
          <div class="footer2_5_1_2_2">
            {{ $t('数据收集描述') }}
          </div>
        </div>
      </div>
      <div class="footer2_5_1">
        <div class="footer2_5_1_1">
          <img src="../assets/tq555.png" alt="" />
        </div>
        <div class="footer2_5_1_2">
          <div class="footer2_5_1_2_1">{{ $t('调研编程') }}</div>
          <div class="footer2_5_1_2_2">
            {{ $t('调研编程描述') }}
          </div>
        </div>
      </div>
      <div class="footer2_5_1">
        <div class="footer2_5_1_1">
          <img src="../assets/tq555.png" alt="" />
        </div>
        <div class="footer2_5_1_2">
          <div class="footer2_5_1_2_1">{{ $t('面板服务') }}</div>
          <div class="footer2_5_1_2_2">
            {{ $t('面板服务描述') }}
          </div>
        </div>
      </div>
      <div class="footer2_5_1">
        <div class="footer2_5_1_1">
          <img src="../assets/tq555.png" alt="" />
        </div>
        <div class="footer2_5_1_2">
          <div class="footer2_5_1_2_1">{{ $t('CATI服务') }}</div>
          <div class="footer2_5_1_2_2">
            {{ $t('CATI服务描述') }}
          </div>
        </div>
      </div>
      <div class="footer2_5_1">
        <div class="footer2_5_1_1">
          <img src="../assets/tq555.png" alt="" />
        </div>
        <div class="footer2_5_1_2">
          <div class="footer2_5_1_2_1">{{ $t('数据分析与报告') }}</div>
          <div class="footer2_5_1_2_2">
            {{ $t('数据分析与报告描述') }}
          </div>
        </div>
      </div>
      <div class="footer2_5_1">
        <div class="footer2_5_1_1">
          <img src="../assets/tq555.png" alt="" />
        </div>
        <div class="footer2_5_1_2">
          <div class="footer2_5_1_2_1">{{ $t('综合调研') }}</div>
          <div class="footer2_5_1_2_2">
            {{ $t('综合调研描述') }}
          </div>
        </div>
      </div>
    </div>
    <div class="footer2_6">
      <div class="footer2_6_1">
        <div class="footer2_6_1_1">{{ $t('我们的面板') }}</div>
        <div class="footer2_6_1_2">{{ $t('全球面板社区') }}</div>
        <div class="footer2_6_1_3">
          {{ $t('全球面板社区描述') }}
        </div>
      </div>
      <div class="footer2_6_2">
        <div class="footer2_6_2_1">
          <img src="../assets/tq7.png" alt="" class="footer2_6_2_1_img" />
          <div class="footer2_6_2_11"></div>
        </div>
      </div>
    </div>
    <div class="footer2_7">
      <img src="../assets/tq222.png" alt="" class="tq1_img" />
      <div class="footer2_7_1">
        <div class="footer2_7_1_1">
          <div class="footer2_7_1_1_1">{{ $t('关于我们') }}</div>
          <div class="footer2_7_1_1_2">
            {{ i18n.locale.value === 'zh' ? gywmz.text : gywmz.e_text }}
          </div>
        </div>
          <div class="footer2_7_1_1">
          <div class="footer2_7_1_1_1">{{ $t('联系我们') }}</div>
          <div class="footer2_7_1_1_2" style="cursor: pointer;" @click="$router.push({ path: '/protocol', query: { id: 15 } })">{{ $t('隐私政策') }}</div>
          <!-- <div class="footer2_7_1_1_2">
            <select v-model="selectedCountry">
              <option value="">Select Country</option>
              <option v-for="country in countries" :key="country.code" :value="country.code">{{ country.name }}</option>
            </select>
            <select v-model="selectedLanguage" :disabled="!selectedCountry" @change="changeLanguage">
              <option v-for="lang in availableLanguages" :key="lang.code" :value="lang.code">{{ lang.name }}</option>
            </select>
          </div> -->
        </div>
      </div>
    </div>
    <div class="footer2_8">
      <div class="footer2_8_1"></div>
    </div>
    <div class="footer2_9">
      {{ i18n.locale.value === 'zh' ? Store.state.shopData.bei_an_code : Store.state.shopData.e_bei_an_code }}
    </div>
  </div>
</template>





<style scoped lang="scss">
.home {
  width: 100vw;
  max-width: 1920px;
  margin: 0 auto;
  background: #ffffff;

  .bg {
    width: 100%;
    height: 1367px;
    background-image: url("../assets/tq5.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .header {
      padding: 49px 194px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;

      .logo {
        width: 163px;
        height: 67px;

        img {
          width: 100%;
        }
      }

      .r {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .r1 {
          font-family: Arial, Arial;
          font-weight: normal;
          font-size: 25px;
          margin: 0 31px;
          color: #1a1a1a;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
      }
    }

    .title {
      padding: 49px 194px;
      font-family: NewsGothicBT, NewsGothicBT;
      font-weight: 300;
      font-size: 115px;
      color: #2d2d2d;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .title2 {
      padding: 18px 194px;
      font-family: NewsGothicBT, NewsGothicBT;
      font-weight: bold;
      font-size: 115px;
      color: #2d2d2d;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .dddd {
      margin: 313px 194px 49px 194px;
      background: #fff;
      border-radius: 31px;
      padding: 94px 94px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 3px 0 65px 0px #3d3b3b2f;
      border-radius: 38px 38px 38px 38px;

      .l {
        width: 40%;

        .r_img {
          width: 80%;
          height: 469px;
        }
      }

      .r {
        width: 55%;

        .t1 {
          width: 445px;
          font-family: Arial, Arial;
          font-weight: normal;
          font-size: 58px;
          color: #000000;
          text-align: center;
          font-style: normal;
          text-transform: none;
          border-bottom: 7px solid #e3cb2f;
          margin: 0 auto;
          padding-bottom: 15px;
        }

        .t2 {
          width: 790px;
          height: 293px;
          margin-top: 53px;
          font-family: ArialMT;
          font-size: 25px;
          color: #000000;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
      }
    }
  }

  .footer {
    width: 496px;
    height: 43px;
    font-family: Arial, Arial;
    font-weight: normal;
    font-size: 57px;
    color: #000000;
    text-align: center;
    font-style: normal;
    text-transform: none;
    margin: 314px auto 156px auto;
  }

  .footer2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 194px;

    .item {
      width: 25%;
      text-align: center;

      .item1 {
        font-family: ArialMT;
        font-size: 60px;
        color: #000000;
        font-style: normal;
        text-transform: none;
      }

      .item2 {
        width: 58px;
        height: 7px;
        background: #e3cb2f;
        margin: 31px auto;
      }

      .item3 {
        font-family: ArialMT;
        font-size: 30px;
        color: #1a1a1a;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }

      .item4 {
        font-family: ArialMT;
        font-size: 30px;
        color: #1a1a1a;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin-top: 16px;
      }
    }
  }

  .footer2_2 {
    display: flex;
    justify-content: space-between;
    padding: 219px 194px 94px 194px;

    .ttt1 {
      font-family: ArialMT;
      font-size: 70px;
      color: #2d2d2d;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }

    .ttt2 {
      width: 776px;
      font-family: ArialMT;
      font-size: 35px;
      color: #000000;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  .footer2_3 {
    display: flex;
    justify-content: space-between;
    padding: 219px 194px;

    .ggg {
      width: 30%;
      height: 528px;
      background: #8db9db;
      text-align: center;
      box-shadow: 3px 0 34px 0px #3d3b3b2f;

      .ggg_img {
        width: 87px;
        height: 92px;
        margin: 113px auto 48px auto;
      }

      .ggg_title {
        font-family: Arial, Arial;
        font-weight: bold;
        font-size: 36px;
        color: #ffffff;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin: 0 46px 17px 46px;
      }

      .ggg_text {
        font-family: ArialMT;
        font-size: 23px;
        color: #ffffff;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin: 0 46px;
      }
    }

    .ggg2 {
      background: #ffffff;

      .ggg_title {
        color: #000000;
      }

      .ggg_text {
        color: #000000;
      }
    }
  }

  .footer2_4 {
    width: 100%;
    height: 1636px;
    background: #dff0fc;
    margin-top: -469px;
    padding: 575px 194px 0 194px;

    .footer2_4_1 {
      font-family: NewsGothicBT, NewsGothicBT;
      font-weight: 300;
      font-size: 49px;
      color: #000000;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .footer2_4_2 {
      font-family: NewsGothicBT, NewsGothicBT;
      font-weight: bold;
      font-size: 49px;
      color: #000000;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .footer2_4_3 {
      font-family: ArialMT;
      font-size: 30px;
      color: #000000;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-top: 42px;
    }
  }

  .footer2_5 {
    width: 100%;
    background: #dff0fc;
    margin-top: -469px;
    padding: 0 194px 0 194px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    .footer2_5_1 {
      width: 30%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 156px;

      .footer2_5_1_1 {
        width: 35px;
        height: 35px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .footer2_5_1_2 {
        width: 80%;

        .footer2_5_1_2_1 {
          font-family: Arial, Arial;
          font-weight: normal;
          font-size: 35px;
          color: #000000;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        .footer2_5_1_2_2 {
          font-family: ArialMT;
          font-size: 26px;
          color: #1a1a1a;
          text-align: left;
          font-style: normal;
          text-transform: none;
          margin-top: 50px;
        }
      }
    }
  }

  .footer2_6 {
    width: 100%;
    background: #ffffff;
    padding: 169px 194px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .footer2_6_1 {
      width: 30%;

      .footer2_6_1_1 {
        width: 306px;
        font-family: ArialMT;
        font-size: 48px;
        color: #000000;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .footer2_6_1_2 {
        width: 692px;
        font-family: Arial, Arial;
        font-weight: normal;
        font-size: 59px;
        color: #000000;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-top: 47px;
      }

      .footer2_6_1_3 {
        width: 642px;
        font-family: ArialMT;
        font-size: 35px;
        color: #000000;
        line-height: 37px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-top: 47px;
      }
    }

    .footer2_6_2 {
      .footer2_6_2_1 {
        width: 804px;
        height: 914px;
        position: relative;

        .footer2_6_2_1_img {
          width: 100%;
          height: 100%;
          position: relative;
          z-index: 1;
        }

        .footer2_6_2_11 {
          position: absolute;
          top: 29px;
          left: 29px;
          width: 100%;
          height: 100%;
          background: #8db9db;
        }
      }
    }
  }

  .footer2_7 {
    width: 100%;
    background: #376385;
    padding: 169px 194px;
    box-sizing: border-box;

    .tq1_img {
      width: 163px;
      height: 67px;
    }

    .footer2_7_1 {
      margin-top: 41px;
      display: flex;

      .footer2_7_1_1 {
        width: 30%;
        margin-right: 156px;

        .footer2_7_1_1_1 {
          font-family: Arial, Arial;
          font-weight: normal;
          font-size: 35px;
          text-align: left;
          color: #ffffff;
          font-style: normal;
          text-transform: none;
        }

        .footer2_7_1_1_2 {
          height: auto;
          font-family: ArialMT;
          font-size: 20px;
          color: #ffffff;
          line-height: 29px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          margin-top: 47px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          line-clamp: 4;
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical;
        }
      }
    }
  }

  .footer2_8 {
    padding: 0 117px;
    background: #376385;

    .footer2_8_1 {
      width: 100%;
      height: 2px;
      background: #ffffff;
    }
  }

  .footer2_9 {
    font-family: ArialMT;
    font-size: 23px;
    color: #ffffff;
    text-align: center;
    font-style: normal;
    text-transform: none;
    background: #376385;
    padding: 75px 20px 131px 20px;
    box-sizing: border-box;
  }
}
</style>


<script setup>
import { ref, computed, watch } from "vue";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

import {
  bannerlist,
  gsjs,
  gsyj,
  renyuanjj,
  noticelist,
  configshop,
  gywm
} from "../api/index";
import { countries, allLanguages } from '../api/aaa';
import { ElMessage, ElMessageBox } from "element-plus";
import SafeHtml from "../components/SafeHtml.vue";
import { useI18n } from "vue-i18n"
const Store = useStore();
const route = useRoute();
const router = useRouter();
console.log(Store.state.userInfoK.uid != 0);

// 获取语言状态
const currentLanguage = computed(() => Store.getters.currentLanguage);

// 专门处理HTML内容的函数
const getCurrentHtmlText = (chineseText, englishText) => {
  if (!chineseText || !englishText) return chineseText || englishText || "";
  const text = currentLanguage.value === "zh" ? chineseText : englishText;

  // 解码HTML实体
  const decodeHtml = (html) => {
    const txt = document.createElement("textarea");
    txt.innerHTML = html;
    return txt.value;
  };

  // 处理常见的HTML实体和标签
  return decodeHtml(text)
    .replace(/&lt;/g, "<")
    .replace(/&gt;/g, ">")
    .replace(/&amp;/g, "&")
    .replace(/&quot;/g, '"')
    .replace(/&#39;/g, "'");
};
const gywmz = ref({});
gywm().then(res => {
  gywmz.value = res.data;
}).catch(err => {
});
// 更强大的HTML内容处理函数
const processHtmlContent = (chineseText, englishText) => {
  if (!chineseText || !englishText) return chineseText || englishText || "";
  const text = currentLanguage.value === "zh" ? chineseText : englishText;

  // 解码HTML实体
  const decodeHtml = (html) => {
    const txt = document.createElement("textarea");
    txt.innerHTML = html;
    return txt.value;
  };

  let processed = decodeHtml(text)
    .replace(/&lt;/g, "<")
    .replace(/&gt;/g, ">")
    .replace(/&amp;/g, "&")
    .replace(/&quot;/g, '"')
    .replace(/&#39;/g, "'")
    .replace(/\\n/g, "<br>")
    .replace(/\\r\\n/g, "<br>")
    .replace(/\\r/g, "<br>");

  // 处理段落和换行
  if (!processed.includes("<p>") && !processed.includes("<div>")) {
    // 将连续的换行符转换为段落
    const paragraphs = processed.split("<br>").filter((p) => p.trim());
    if (paragraphs.length > 1) {
      processed = paragraphs.map((p) => `<p>${p.trim()}</p>`).join("");
    }
  }

  return processed;
};

const bannerlistz = ref([]);
const noticelistz = ref([
  {
    title: "",
    text: "",
    e_title: "",
    e_text: "",
  },
]);
const gsjsz = ref({});
const gsyjz = ref({});
const renyuanjz = ref([]);
const configshopz = ref({});

const getData = async () => {
  let info = await bannerlist();
  bannerlistz.value = info.data;
  let info2 = await gsjs();
  gsjsz.value = info2.data;
  let info3 = await gsyj();
  gsyjz.value = info3.data;
  let info4 = await renyuanjj();
  renyuanjz.value = info4.data;
  let info5 = await noticelist({ pageIndex: 1, pageSize: 10 });
  noticelistz.value = info5.data.list;
};

const getData2 = async () => {
  let info = await configshop();
  configshopz.value = info.data;
};

getData();
getData2();

const global = (item) => {
  window.open(item.url);
};

const zdyUrl = () => {
  window.open(configshopz.value.zdy_url);
};

const chechBox = ref();
const isMobile = ref();
isMobile.value = Store.state.isMobile;
chechBox.value = Store.state.checkBox;

const Tyi = () => {
  chechBox.value = false;
  Store.state.checkBox = false;
};

const go = () => {
  // 跳转到关于我们页面或其他相关页面
  console.log("了解更多");
};

const lll = () => {
  // 人员简介相关操作
  console.log("人员简介");
};

const heightMax = ref();
heightMax.value = window.innerWidth / 2;
window.scrollTo({
  top: 0,
  left: 0,
  behavior: "smooth", // 可选，平滑滚动效果
});

// Add this new code block
const selectedCountry = ref('');
const selectedLanguage = ref('');

const availableLanguages = computed(() => {
  console.log(countries.value);
  const country = countries.value.find(c => c.code === selectedCountry.value);

  return country ? country.languages : [];
});
const i18n = useI18n()
const changeLanguage = (e) => {
  i18n.locale.value = selectedLanguage.value
  cookie.set('localLang', selectedLanguage.value)
  location.reload()

};
const wj = () => {
  router.push('/homepage')
}
const home = () => {
  router.push('/home')
}

const zy = () => {


  // i18n.locale.value
  if (i18n.locale.value === 'zh') {
    i18n.locale.value = 'en'
    cookie.set('localLang', 'en')
    location.reload()
  } else {
    i18n.locale.value = 'zh'
    cookie.set('localLang', 'zh')
    location.reload()
  }
}
const goToProfile = () => {
  router.push('/user')
}
const login = () => {
  router.push('/login')
}
// End of new code block
</script>